<template>
  <div class="Comment">
    <div class="Comment_top">
      <img class="Comment_img" src="@/assets/img/comment1.png"/>
      <span class="comment_title">评论</span>
      <img class="Comment_img" src="@/assets/img/comment2.png"/>
    </div>
    <div class="Comment_bot" v-for="a in comment">
      <el-divider class="link"></el-divider>
      <div class="Com_cont">
        <el-avatar :src="a[2]" :size="150" fit="fill"></el-avatar>
        <div class="Com_cont_text">
          <span class="name">{{a[1]}}</span>
          <span class="date">{{a[0].commentTime.slice(0,10)}}</span>
          <span class="text_content">{{a[0].content}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {apiByIdComment} from "../request/api"

  export default {
    name: "Comment",
    data() {
      return {
        comment: "",
        bookId: ''
      }
    },
    created () {
      this.$bus.on("bookId", (bookId) => {
        this.bookId = bookId
        // console.log(bookId)
      })
      apiByIdComment({bookId:this.bookId}).then(res => {
        this.comment = res.data.comment
        console.log(res)
      })
    },
    activated () {
      // this.$bus.on("bookId", (bookId) => {
      //   this.bookId = bookId;
      // });
      // apiByIdComment({bookId:this.bookId}).then(res => {
      //   this.comment = res.data.comment
      //   console.log(res)
      // })
    },
    mounted() {

    }
  }
</script>

<style scoped>
  .Comment {
    margin: 250px 0 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .Comment_top {
    margin-bottom: 25px;
  }
  .comment_title {
    font-size: 40px;
    margin: 0 20px 0;
    line-height: 60px;
    font-family: 华文隶书;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
  }
  .Comment_bot {
    width: 100%;
  }
  .link {
    width: 80%;
    margin: auto;
  }
  .Com_cont {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 5% 12% 5%;
  }
  .Com_cont_text {
    width: 60%;
    display: flex;
    flex-direction: column;
  }
  .name{
    font-size: 26px;
    line-height: 60px;
    font-family: 华文隶书;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
  }
  .date {
    color: #666666;
    margin-bottom: 10px;
  }
  .text_content {
    margin: 0;
    line-height: 1.5;
  }
</style>
